<template>
    <!-- <div class="ac-all">
        <div class="i-navs c-title-4 c-bold">
            <div class="i-nav" :class="{ choose: i == curBtn }" v-for="i in buttons" :key="i.label" @click="onNav(i)">{{ i.label }}</div>

            <div class="t-go">
                <JButtons :list="times" v-model="curTime"></JButtons>
            </div>
        </div>
        <div class="tb c-title-5">
            <div class="tb-lists" v-if="curBtn">
                <Transfer v-if="hasInit.transfer" method="transfer" :token="token" :time="curTime" :page="page"></Transfer>
                <Swap v-if="hasInit.swap" method="swap" :token="token" :page="page" :time="curTime"></Swap>
            </div>
        </div>
    </div> -->
    <div class="ac-all">
        <div :class="[page == 'token' ? 'left-4' : 'left-1']">
            <div class="i-navs c-title-4 c-bold">
                <div class="i-nav curBtn">{{ $t("message.Token.JRecord.b") }}</div>
            </div>
            <div class="tb-lists c-title-5">
                <tokenTransfer method="transfer" :token="token" page="token" :time="curTime" v-if="page == 'token'">
                </tokenTransfer>
                <personTransfer method="transfer" :token="token" page="address" :time="curTime" v-if="page == 'address'">
                </personTransfer>
                <browserTransfer method="transfer" :token="token" page="entity" :time="curTime" v-if="page == 'entity'">
                </browserTransfer>
            </div>
        </div>
        <div class="center">

        </div>
        <div :class="[page == 'token' ? 'right-6' : 'right-1']">
            <div class="i-navs c-title-4 c-bold">
                <div class="i-nav curBtn">{{ $t("message.Token.JRecord.a") }}</div>
            </div>
            <div class="tb-lists c-title-5" style="flex: 1;">
                <tokenSwap method="swap" :token="token" page="token" :time="curTime" v-if="page == 'token'"></tokenSwap>
                <personSwap method="swap" :token="token" page="address" :time="curTime" v-if="page == 'address'">
                </personSwap>
                <browserSwap method="swap" :token="token" page="entity" :time="curTime" v-if="page == 'entity'">
                </browserSwap>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import i18n from "@/locals";
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import JButtons from "@/components/j-buttons/index.vue";
import Swap from "./swap.vue";
import Transfer from "./transfer.vue";
import tokenTransfer from "./transfer/tokenTransfer.vue";
import personTransfer from './transfer/personTransfer.vue';
import browserTransfer from './transfer/browserTransfer.vue';

import browserSwap from './swap/browserSwap.vue'
import tokenSwap from "./swap/tokenSwap.vue";
import personSwap from "./swap/personSwap.vue";
const route = useRoute();
const token = ref(route.params.id + "");
const times = ref([
    {
        label: "D",
        value: "D"
    },
    {
        label: "W",
        value: "W"
    }
]);

const curTime = ref(times.value[1]);
const cur2Time = ref(times.value[1]);
const hasInit = ref({
    swap: false,
    transfer: true
});

const props = defineProps({
    page: {
        type: String,
        default: "token"
    }
});

const buttons = ref([
    {
        // label: "转帐记录",
        label: i18n.global.t("message.Token.JRecord.b"),
        value: "transfer"
    },
    {
        // label: "交易记录",
        label: i18n.global.t("message.Token.JRecord.a"),
        value: "swap"
    }
]);
const curBtn = ref<any>();

const onNav = async (i: any) => {
    // curBtn.value = i;
    // cur2Time.value = i
    // console.log("jsz切换", i);
    // if (i.value == "swap") {
    //     hasInit.value.transfer = false;
    //     hasInit.value.swap = true;
    // }
    // if (i.value == "transfer") {
    //     hasInit.value.swap = false;
    //     hasInit.value.transfer = true;
    // }
};

onMounted(async () => {
    onNav(buttons.value[0]);
});
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
